<template>
	<view class="activity-details">
		<navigator class="back-arrow" open-type="navigateBack">
			<view class="arrow"></view>
		</navigator>
		<text class="title">活动详情</text>
	</view>

	<view class="detail-container">
		<view class="detail-item">
			<text class="label">标题：</text>
			<text class="value">{{ activityData.title }}</text>
		</view>
		<view class="detail-item">
			<text class="label">发布人：</text>
			<text class="value">{{ activityData.publisher }}</text>
		</view>
		<view class="detail-item">
			<text class="label">发布时间：</text>
			<text class="value">{{ activityData.publishTime }}</text>
		</view>
		<view class="detail-item">
			<text class="label">审核状态：</text>
			<text class="value">{{ activityData.reviewStatus }}</text>
		</view>
		<view class="detail-item">
			<text class="label">审核时间：</text>
			<text class="value">{{ activityData.reviewTime }}</text>
		</view>
		<view class="detail-item">
			<text class="label">审核说明：</text>
			<text class="value">{{ activityData.reviewNotes }}</text>
		</view>
		<view class="detail-item">
			<text class="label">发布内容：</text>
			<text class="value">{{ activityData.content }}</text>
		</view>
		<view class="detail-item">
			<text class="label">图片：</text>
			<image class="activity-image" :src="activityData.image"></image>
		</view>
	</view>
</template>

<script setup>
	import {
		ref
	} from 'vue';

	// 仅存储数据
	const activityData = ref({
		title: "阳春三月游江南活动开始报名了",
		publisher: "xx广播",
		publishTime: "2022-10-10 11:09",
		reviewStatus: "待审核",
		reviewTime: "2022-10-10 11:09",
		reviewNotes: "xxxx",
		content: "内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容",
		image: "https://q8.itc.cn/q_70/images03/20241030/7e4e379bf5b84b6c9fb4a9fec3102d5d.jpeg" // 图片路径
	});
</script>

<style>
	/* 顶部导航样式 */
	.activity-details {
		display: flex;
		justify-content: center;
		align-items: center;
		/* 调整对齐方式，让内容靠近顶部 */
		height: 10vh;
		background-color: #F8F8F8;
		margin-bottom: 20rpx;
	}

	.back-arrow {
		position: relative;
		display: flex;
		align-items: center;
		justify-content: center;
		cursor: pointer;
		/*  margin-right: 10px; */
		left: -250rpx;
	}

	.arrow {
		width: 10px;
		height: 10px;
		border-top: 2px solid black;
		border-right: 2px solid black;
		transform: rotate(-135deg);
		margin-top: 2vh;
	}

	.title {
		font-size: 20px;
		font-weight: normal;
		color: black;
		margin-top: 2vh;
		/* 向上移动标题，减少底部空间 */
	}

	/* 详情内容布局 */
	.detail-container {
		padding: 20rpx 80rpx;
	}

	.detail-item {
		display: flex;
		align-items: center;
		margin-bottom: 20rpx;
	}


	.label {
		font-weight: normal;
		width: 200rpx;
		/* 设定固定宽度，让对齐更整齐 */
	}

	.value {
		flex: 1;
		color: #333;
	}

	.value {
		flex: 1;
		color: #333;
	}

	/* 图片样式 */
	.activity-image {
		width: 340rpx;
		height: 240rpx;
		margin-top: 10rpx;
	}
</style>